<template>
  <div>
    <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 500" xmlns="http://www.w3.org/2000/svg"
         class="transition duration-300 ease-in-out delay-150">
      <path
          d="M 0,500 C 0,500 0,100 0,100 C 85.77990430622009,108.21052631578948 171.55980861244018,116.42105263157895 258,106 C 344.4401913875598,95.57894736842105 431.5406698564592,66.5263157894737 532,65 C 632.4593301435408,63.47368421052631 746.2775119617224,89.47368421052632 841,98 C 935.7224880382776,106.52631578947368 1011.3492822966507,97.57894736842105 1108,95 C 1204.6507177033493,92.42105263157895 1322.3253588516745,96.21052631578948 1440,100 C 1440,100 1440,500 1440,500 Z"
          stroke="none" stroke-width="0" fill="#7bdcb544"
          class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
      <path
          d="M 0,500 C 0,500 0,200 0,200 C 83.17703349282297,181.13875598086125 166.35406698564594,162.2775119617225 253,169 C 339.64593301435406,175.7224880382775 429.76076555023917,208.02870813397126 529,210 C 628.2392344497608,211.97129186602874 736.6028708133971,183.60765550239236 842,180 C 947.3971291866029,176.39234449760764 1049.8277511961724,197.54066985645935 1149,205 C 1248.1722488038276,212.45933014354065 1344.0861244019138,206.22966507177034 1440,200 C 1440,200 1440,500 1440,500 Z"
          stroke="none" stroke-width="0" fill="#7bdcb566"
          class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
      <path
          d="M 0,500 C 0,500 0,300 0,300 C 78.32535885167462,318.97607655502395 156.65071770334924,337.95215311004785 265,337 C 373.34928229665076,336.04784688995215 511.72248803827756,315.1674641148325 617,309 C 722.2775119617224,302.8325358851675 794.4593301435407,311.37799043062205 887,303 C 979.5406698564593,294.62200956937795 1092.4401913875597,269.3205741626794 1188,266 C 1283.5598086124403,262.6794258373206 1361.77990430622,281.3397129186603 1440,300 C 1440,300 1440,500 1440,500 Z"
          stroke="none" stroke-width="0" fill="#7bdcb588"
          class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
      <path
          d="M 0,500 C 0,500 0,400 0,400 C 71.22488038277513,379.4736842105263 142.44976076555025,358.9473684210526 244,362 C 345.55023923444975,365.0526315789474 477.42583732057415,391.68421052631584 588,395 C 698.5741626794259,398.31578947368416 787.8468899521532,378.3157894736842 886,378 C 984.1531100478468,377.6842105263158 1091.1866028708132,397.05263157894734 1185,404 C 1278.8133971291868,410.94736842105266 1359.4066985645934,405.47368421052636 1440,400 C 1440,400 1440,500 1440,500 Z"
          stroke="none" stroke-width="0" fill="#7bdcb5ff"
          class="transition-all duration-300 ease-in-out delay-150 path-3"></path>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'waves'
}
</script>

<style lang="scss" scoped>
.path-0 {
  animation: pathAnim-0 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.path-1 {
  animation: pathAnim-1 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.path-2 {
  animation: pathAnim-2 7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.path-3 {
  animation: pathAnim-3 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes pathAnim-0 {
  0% {
    d: path("M 0,500 C 0,500 0,100 0,100 C 85.77990430622009,108.21052631578948 171.55980861244018,116.42105263157895 258,106 C 344.4401913875598,95.57894736842105 431.5406698564592,66.5263157894737 532,65 C 632.4593301435408,63.47368421052631 746.2775119617224,89.47368421052632 841,98 C 935.7224880382776,106.52631578947368 1011.3492822966507,97.57894736842105 1108,95 C 1204.6507177033493,92.42105263157895 1322.3253588516745,96.21052631578948 1440,100 C 1440,100 1440,500 1440,500 Z");
  }
  25% {
    d: path("M 0,500 C 0,500 0,100 0,100 C 109.88516746411483,106.88995215311004 219.77033492822966,113.7799043062201 300,107 C 380.22966507177034,100.2200956937799 430.8038277511962,79.77033492822967 529,70 C 627.1961722488038,60.22966507177033 773.0143540669854,61.13875598086125 870,76 C 966.9856459330146,90.86124401913875 1015.1387559808613,119.67464114832535 1102,126 C 1188.8612440191387,132.32535885167465 1314.4306220095693,116.16267942583733 1440,100 C 1440,100 1440,500 1440,500 Z");
  }
  50% {
    d: path("M 0,500 C 0,500 0,100 0,100 C 76.24880382775117,92.3732057416268 152.49760765550235,84.7464114832536 261,91 C 369.50239234449765,97.2535885167464 510.2583732057417,117.38755980861242 612,129 C 713.7416267942583,140.61244019138758 776.4688995215311,143.70334928229667 860,136 C 943.5311004784689,128.29665071770333 1047.866028708134,109.79904306220095 1148,102 C 1248.133971291866,94.20095693779905 1344.066985645933,97.10047846889952 1440,100 C 1440,100 1440,500 1440,500 Z");
  }
  75% {
    d: path("M 0,500 C 0,500 0,100 0,100 C 128.2870813397129,111.64593301435407 256.5741626794258,123.29186602870814 340,131 C 423.4258373205742,138.70813397129186 461.9904306220095,142.47846889952154 534,131 C 606.0095693779905,119.52153110047846 711.4641148325359,92.79425837320575 825,92 C 938.5358851674641,91.20574162679425 1060.153110047847,116.3444976076555 1164,122 C 1267.846889952153,127.6555023923445 1353.9234449760766,113.82775119617224 1440,100 C 1440,100 1440,500 1440,500 Z");
  }
  100% {
    d: path("M 0,500 C 0,500 0,100 0,100 C 85.77990430622009,108.21052631578948 171.55980861244018,116.42105263157895 258,106 C 344.4401913875598,95.57894736842105 431.5406698564592,66.5263157894737 532,65 C 632.4593301435408,63.47368421052631 746.2775119617224,89.47368421052632 841,98 C 935.7224880382776,106.52631578947368 1011.3492822966507,97.57894736842105 1108,95 C 1204.6507177033493,92.42105263157895 1322.3253588516745,96.21052631578948 1440,100 C 1440,100 1440,500 1440,500 Z");
  }
}

@keyframes pathAnim-1 {
  0% {
    d: path("M 0,500 C 0,500 0,200 0,200 C 83.17703349282297,181.13875598086125 166.35406698564594,162.2775119617225 253,169 C 339.64593301435406,175.7224880382775 429.76076555023917,208.02870813397126 529,210 C 628.2392344497608,211.97129186602874 736.6028708133971,183.60765550239236 842,180 C 947.3971291866029,176.39234449760764 1049.8277511961724,197.54066985645935 1149,205 C 1248.1722488038276,212.45933014354065 1344.0861244019138,206.22966507177034 1440,200 C 1440,200 1440,500 1440,500 Z");
  }
  25% {
    d: path("M 0,500 C 0,500 0,200 0,200 C 93.12918660287082,195.4736842105263 186.25837320574163,190.94736842105263 289,183 C 391.74162679425837,175.05263157894737 504.0956937799043,163.68421052631578 591,163 C 677.9043062200957,162.31578947368422 739.3588516746412,172.31578947368422 839,182 C 938.6411483253588,191.68421052631578 1076.468899521531,201.05263157894734 1183,204 C 1289.531100478469,206.94736842105266 1364.7655502392345,203.47368421052633 1440,200 C 1440,200 1440,500 1440,500 Z");
  }
  50% {
    d: path("M 0,500 C 0,500 0,200 0,200 C 120.18181818181819,199.2822966507177 240.36363636363637,198.56459330143542 325,201 C 409.6363636363636,203.43540669856458 458.72727272727275,209.02392344497608 541,212 C 623.2727272727273,214.97607655502392 738.7272727272729,215.33971291866027 835,216 C 931.2727272727271,216.66028708133973 1008.3636363636363,217.6172248803828 1106,215 C 1203.6363636363637,212.3827751196172 1321.818181818182,206.19138755980862 1440,200 C 1440,200 1440,500 1440,500 Z");
  }
  75% {
    d: path("M 0,500 C 0,500 0,200 0,200 C 67.16746411483251,203.05263157894737 134.33492822966502,206.10526315789474 241,207 C 347.665071770335,207.89473684210526 493.82775119617224,206.63157894736844 590,203 C 686.1722488038278,199.36842105263156 732.3540669856459,193.3684210526316 818,187 C 903.6459330143541,180.6315789473684 1028.755980861244,173.89473684210526 1139,176 C 1249.244019138756,178.10526315789474 1344.622009569378,189.05263157894737 1440,200 C 1440,200 1440,500 1440,500 Z");
  }
  100% {
    d: path("M 0,500 C 0,500 0,200 0,200 C 83.17703349282297,181.13875598086125 166.35406698564594,162.2775119617225 253,169 C 339.64593301435406,175.7224880382775 429.76076555023917,208.02870813397126 529,210 C 628.2392344497608,211.97129186602874 736.6028708133971,183.60765550239236 842,180 C 947.3971291866029,176.39234449760764 1049.8277511961724,197.54066985645935 1149,205 C 1248.1722488038276,212.45933014354065 1344.0861244019138,206.22966507177034 1440,200 C 1440,200 1440,500 1440,500 Z");
  }
}

@keyframes pathAnim-2 {
  0% {
    d: path("M 0,500 C 0,500 0,300 0,300 C 78.32535885167462,318.97607655502395 156.65071770334924,337.95215311004785 265,337 C 373.34928229665076,336.04784688995215 511.72248803827756,315.1674641148325 617,309 C 722.2775119617224,302.8325358851675 794.4593301435407,311.37799043062205 887,303 C 979.5406698564593,294.62200956937795 1092.4401913875597,269.3205741626794 1188,266 C 1283.5598086124403,262.6794258373206 1361.77990430622,281.3397129186603 1440,300 C 1440,300 1440,500 1440,500 Z");
  }
  25% {
    d: path("M 0,500 C 0,500 0,300 0,300 C 99.23444976076553,301.36842105263156 198.46889952153106,302.7368421052632 290,305 C 381.53110047846894,307.2631578947368 465.3588516746412,310.42105263157896 562,300 C 658.6411483253588,289.57894736842104 768.0956937799041,265.57894736842104 876,273 C 983.9043062200959,280.42105263157896 1090.2583732057417,319.2631578947368 1184,329 C 1277.7416267942583,338.7368421052632 1358.870813397129,319.36842105263156 1440,300 C 1440,300 1440,500 1440,500 Z");
  }
  50% {
    d: path("M 0,500 C 0,500 0,300 0,300 C 110.53588516746413,275.3875598086124 221.07177033492826,250.7751196172249 320,263 C 418.92822966507174,275.2248803827751 506.2488038277512,324.2870813397129 588,324 C 669.7511961722488,323.7129186602871 745.9330143540672,274.0765550239234 830,263 C 914.0669856459328,251.9234449760766 1006.0191387559807,279.40669856459334 1109,292 C 1211.9808612440193,304.59330143540666 1325.9904306220096,302.2966507177033 1440,300 C 1440,300 1440,500 1440,500 Z");
  }
  75% {
    d: path("M 0,500 C 0,500 0,300 0,300 C 123.09090909090907,293.3014354066986 246.18181818181813,286.60287081339715 337,280 C 427.81818181818187,273.39712918660285 486.3636363636364,266.8899521531101 559,267 C 631.6363636363636,267.1100478468899 718.3636363636365,273.8373205741626 832,273 C 945.6363636363635,272.1626794258374 1086.1818181818182,263.7607655502392 1192,267 C 1297.8181818181818,270.2392344497608 1368.909090909091,285.11961722488036 1440,300 C 1440,300 1440,500 1440,500 Z");
  }
  100% {
    d: path("M 0,500 C 0,500 0,300 0,300 C 78.32535885167462,318.97607655502395 156.65071770334924,337.95215311004785 265,337 C 373.34928229665076,336.04784688995215 511.72248803827756,315.1674641148325 617,309 C 722.2775119617224,302.8325358851675 794.4593301435407,311.37799043062205 887,303 C 979.5406698564593,294.62200956937795 1092.4401913875597,269.3205741626794 1188,266 C 1283.5598086124403,262.6794258373206 1361.77990430622,281.3397129186603 1440,300 C 1440,300 1440,500 1440,500 Z");
  }
}

@keyframes pathAnim-3 {
  0% {
    d: path("M 0,500 C 0,500 0,400 0,400 C 71.22488038277513,379.4736842105263 142.44976076555025,358.9473684210526 244,362 C 345.55023923444975,365.0526315789474 477.42583732057415,391.68421052631584 588,395 C 698.5741626794259,398.31578947368416 787.8468899521532,378.3157894736842 886,378 C 984.1531100478468,377.6842105263158 1091.1866028708132,397.05263157894734 1185,404 C 1278.8133971291868,410.94736842105266 1359.4066985645934,405.47368421052636 1440,400 C 1440,400 1440,500 1440,500 Z");
  }
  25% {
    d: path("M 0,500 C 0,500 0,400 0,400 C 97.4354066985646,403.70334928229664 194.8708133971292,407.4066985645933 276,414 C 357.1291866028708,420.5933014354067 421.9521531100478,430.07655502392345 526,424 C 630.0478468899522,417.92344497607655 773.3205741626795,396.287081339713 870,396 C 966.6794258373205,395.712918660287 1016.7655502392345,416.77511961722485 1104,421 C 1191.2344497607655,425.22488038277515 1315.6172248803828,412.6124401913876 1440,400 C 1440,400 1440,500 1440,500 Z");
  }
  50% {
    d: path("M 0,500 C 0,500 0,400 0,400 C 103.8468899521531,383.52153110047846 207.6937799043062,367.04306220095697 309,369 C 410.3062200956938,370.95693779904303 509.07177033492826,391.34928229665076 605,408 C 700.9282296650717,424.65071770334924 794.0191387559809,437.5598086124402 878,434 C 961.9808612440191,430.4401913875598 1036.8516746411485,410.41148325358853 1129,402 C 1221.1483253588515,393.58851674641147 1330.5741626794256,396.7942583732057 1440,400 C 1440,400 1440,500 1440,500 Z");
  }
  75% {
    d: path("M 0,500 C 0,500 0,400 0,400 C 86.68899521531102,391.5406698564593 173.37799043062205,383.08133971291863 267,377 C 360.62200956937795,370.91866028708137 461.17703349282294,367.2153110047847 573,370 C 684.8229665071771,372.7846889952153 807.913875598086,382.0574162679426 901,388 C 994.086124401914,393.9425837320574 1057.1674641148327,396.555023923445 1142,398 C 1226.8325358851673,399.444976076555 1333.4162679425835,399.7224880382775 1440,400 C 1440,400 1440,500 1440,500 Z");
  }
  100% {
    d: path("M 0,500 C 0,500 0,400 0,400 C 71.22488038277513,379.4736842105263 142.44976076555025,358.9473684210526 244,362 C 345.55023923444975,365.0526315789474 477.42583732057415,391.68421052631584 588,395 C 698.5741626794259,398.31578947368416 787.8468899521532,378.3157894736842 886,378 C 984.1531100478468,377.6842105263158 1091.1866028708132,397.05263157894734 1185,404 C 1278.8133971291868,410.94736842105266 1359.4066985645934,405.47368421052636 1440,400 C 1440,400 1440,500 1440,500 Z");
  }
}
</style>
